<template>
	<view class="wrap-banner" v-if="dataInfo">
		<view class="wrap-content">
			<block v-if="dataInfo.article_type == 1">
				<video class="video" :src="$getImageURL(dataInfo.video)" :poster="$getImageURL(dataInfo.image)" />
			</block>

			<block v-else-if="dataInfo.article_type == 0">
				<block v-for="(item, index) in dataInfo.images" :key="index">
					<image class="item" mode="widthFix" :src="$getImageURL(item)" @click="onImage(index)" />
				</block>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 数据
			 */
			dataInfo: {
				type: Object,
				default: null,
			},
		},
		data() {
			return {
				currentIndex: 0,
			};
		},
		methods: {
			/**
			 * 轮播
			 */
			onSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			/**
			 * 点击图片
			 */
			onImage(index) {
				this.$filters.onPreviewImage(this.dataInfo.images, index);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-banner {
		width: 100%;
		overflow: hidden;
		position: relative;

		.wrap-content {
			width: 100%;
			border-radius: 16rpx;
			overflow: hidden;
			
			.video {
				width: 100%;
				height: auto;
				aspect-ratio: 1;
			}

			.item {
				width: 100%;
			}
		}

		.wrap-page-control {
			width: 100%;
			height: 50rpx;
			gap: 8rpx;

			.item {
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #cbcbcc;
			}

			.active {
				background: $theme-gradit-color;
			}
		}
	}
</style>
